<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=1024, user-scalable=no">

  <title>Your deck.js Presentation</title>

  <!-- Required stylesheet -->
  <link rel="stylesheet" media="screen" href="core/deck.core.css">

  <!-- Extension CSS files go here. Remove or add as needed. -->
  <link rel="stylesheet" media="screen" href="extensions/goto/deck.goto.css">
  <link rel="stylesheet" media="screen" href="extensions/menu/deck.menu.css">
  <link rel="stylesheet" media="screen" href="extensions/navigation/deck.navigation.css">
  <link rel="stylesheet" media="screen" href="extensions/status/deck.status.css">
  <link rel="stylesheet" media="screen" href="extensions/scale/deck.scale.css">

  <!-- Style theme. More available in /themes/style/ or create your own. -->
  <link rel="stylesheet" media="screen" href="themes/style/web-2.0.css">

  <!-- Transition theme. More available in /themes/transition/ or create your own. -->
  <link rel="stylesheet" media="screen" href="themes/transition/horizontal-slide.css">

  <!-- Basic black and white print styles -->
  <link rel="stylesheet" media="print" href="core/print.css">

  <!-- Required Modernizr file -->
  <script src="modernizr.custom.js"></script>
</head>
<body>
  <div class="deck-container">

    <!-- Begin slides. Just make elements with a class of slide. -->

    <section class="slide">
      <h1>布局、定位与浮动(续)</h1>
    </section>

    <section class="slide">
      <div class="deck-slide-scaler" style="transform: scale(0.996677740863787);">
        <h3>课程回顾</h3>
        <h3>借鉴资料</h3>
        <h3>浮动Float与布局</h3>
        <h3>定位Position</h3>
        <h3>页面基本设定</h3>
      </div>
    </section>

    <section class="slide">
      <div style="float:right;width:40%;height: 90%;overflow: auto;margin-right: 50px">
        <div><img src="pic/box_model.png"/></div>
        <div><img src="pic/visual_model.png"/></div>
      </div>

      <div class="deck-slide-scaler" style="transform: scale(0.996677740863787);">
        <h2>课程回顾</h2>
        <ol>
          <li><h3> 环境设定</h3>
            <h4>端口修改</h4>
            <h4>服务器端口与允许外部连接</h4>
            <h4>项目编码utf8设定</h4>
          </li>

          <li><h3>单位: rem/px/em/50%</h3></li>
          <li><h3><a href="http://localhost:63343/deck.js-latest/html5workspace/boxmodel.html">盒子模型</a></h3></li>
          <li><h3>可视化模型</h3>
            <h4>块盒子与行盒子</h4><h4>块级元素与行内元素</h4>
          </li>

        </ol>
      </div>

    </section>
    <section class="slide">
      <div style="float:right;width:40%;height: 90%;overflow:auto;margin-right: 50px">
        <div><img src="pic/ctrip.PNG"/></div>
      </div>
      <div class="deck-slide-scaler" style="transform: scale(0.996677740863787);">
        <h2>借鉴资料</h2>
        <ol>
          <li><h3>视频资源</h3>
            <h4><a href="http://www.jikexueyuan.com/path/">极客学院知识体系图之HTML5</a></h4>
            <h4><a href="http://pan.baidu.com/s/1kTsxjGb">极客学院视频</a></h4>
          </li>
          <li><h3>其它网站,如:</h3>
            <h4><a href="http://i.waimai.meituan.com/order/confirm">美团网</a></h4>
            <h4><a href="http://m.ctrip.com/html5/?allianceid=7225&ouid=h5&sid=170859&sales=wx">携程旅行网</a></h4>
          </li>
          <li><h3>纸质资料</h3>
            <h4>图书馆任何一本HTML5 || CSS3书(好吧，最好还是老外写的中文翻译书)</h4>
            <h4><a href="http://www.w3school.com.cn/">http://www.w3school.com.cn/</a></h4>
          </li>
          <li><h3>外事不决问谷歌/baidu</h3>
          </li>
        </ol>

      </div>
    </section>

    <section class="slide">
      <div class="deck-slide-scaler" style="transform: scale(0.996677740863787);">
        <h2>浮动Float</h2>
        <ol>
          <li>
            <h3>Float的由来</h3>
            <p>会挤占行内元素的空间</p>
            <h4><a href="http://localhost:63343/deck.js-latest/html5workspace/floatlayout.html">
              float基本特性
            </a>
            </h4>
          </li>
          <li>
            <h3>清除浮动</h3>
            <p>clear:left/right/both</p>
          </li>
          <li>
            <h3><a href="http://localhost:63343/deck.js-latest/html5workspace/floatlayout.html">float布局
            </a>
            </h3>
          </li>
          <li>
            <h3><a href="http://localhost:63343/deck.js-latest/html5workspace/float-shuangfeiyi.html">经典双飞翼布局
            </a>
              <h4>负边距技术,负边距居然可以让float重叠...</h4>
            </h3>
          </li>

        </ol>
      </div>
    </section>

    <section class="slide">
      <div class="deck-slide-scaler" style="transform: scale(0.996677740863787);">
        <h2>定位Position</h2>
        <ol>
          <li>
            <h3>常规流(Normal flow)</h3>
            <p>position:static 或者默认</p>
            <p>正常的可视化模型</p>
          </li>
          <li>
            <h3>Out of flow</h3>
            <p>绝对定位 position:absolute</p>
            <p>特殊的绝对定位：固定定位 position:fixed.</p>
            <p>浮动float</p>
            <p>脱离常规流，让出原来的位置</p>
          </li>
          <li>
            <h3>相对定位</h3>
            <p>position:relative</p>
            <p>相对自身本来位置进行移动</p>
          </li>
          <li>
            <h3>绝对定位/相对定位定位属性</h3>
            <p>top,left,bottom,right.</p>
          </li>
        </ol>
      </div>
    </section>

    <section class="slide">
      <div class="deck-slide-scaler" style="transform: scale(0.996677740863787);">
        <h2>页面基本设定</h2>
        <ol>
          <li>
            <h3>字符集</h3>
          </li><li>
          <h3>视口(viewpoint)设定</h3>
        </li><li>
          <h3>缩放(scalable)设定</h3>
          </li>
        </ol>
      </div>
    </section>






    <section class="slide">
      <div style="float:right;width:40%;height: 90%;overflow: auto;margin-right: 50px">
        <div><img src="exercise/02/景点_列表.jpg"/></div>
        <div><img src="exercise/02/景点_详情.jpg"/></div>
      </div>
      <div class="deck-slide-scaler" style="transform: scale(0.996677740863787);">
        <h2>作业</h2>
        <ol>
          <li><h3>留意问题</h3></li>
          <p>图片宽度100%的情况下如何等比缩放</p>
          <p>清除浮动</p>
        </li>
        </ol>
      </div>
    </section>

    <h3></h3>



    <section class="slide">
      <h1>Thanks, You're dismissed!</h1>
    </section>


    <!-- End slides. -->

    <!-- Begin extension snippets. Add or remove as needed. -->

    <!-- deck.navigation snippet -->
    <div aria-role="navigation">
      <a href="#" class="deck-prev-link" title="Previous">&#8592;</a>
      <a href="#" class="deck-next-link" title="Next">&#8594;</a>
    </div>

    <!-- deck.status snippet -->
    <p class="deck-status" aria-role="status">
      <span class="deck-status-current"></span>
      /
      <span class="deck-status-total"></span>
    </p>

    <!-- deck.goto snippet -->
    <form action="." method="get" class="goto-form">
      <label for="goto-slide">Go to slide:</label>
      <input type="text" name="slidenum" id="goto-slide" list="goto-datalist">
      <datalist id="goto-datalist"></datalist>
      <input type="submit" value="Go">
    </form>

    <!-- End extension snippets. -->
  </div>

<!-- Required JS files. -->
<script src="jquery-1.11.3.js"></script>
<script src="core/deck.core.js"></script>

<!-- Extension JS files. Add or remove as needed. -->
<script src="extensions/menu/deck.menu.js"></script>
<script src="extensions/goto/deck.goto.js"></script>
<script src="extensions/status/deck.status.js"></script>
<script src="extensions/navigation/deck.navigation.js"></script>
<script src="extensions/scale/deck.scale.js"></script>

<!-- Initialize the deck. You can put this in an external file if desired. -->
<script>
  $(function() {
    $.deck('.slide');
  });
</script>
</body>
</html>
